<template>
  <div class="pcic-area-select">
    <dict-dbclick-area @change="handleProvinceChange" v-model="value.province" :dict="provinceDict" placeholder="省"/>
    <dict-dbclick-area class="not-first" @change="handleCityChange" ref="cityRef" v-model="value.city"
                 :dict="cityDict"
                 placeholder="市"></dict-dbclick-area>
    <dict-dbclick-area class="not-first" @change="handleCountryChange" ref="countryRef" v-model="value.country"
                 :dict="countryDict"
                 placeholder="区/县"></dict-dbclick-area>
    <dict-dbclick-area class="not-first" @change="handleTownChange" ref="townRef" v-model="value.town"
                 :dict="townDict"
                 placeholder="乡/镇"></dict-dbclick-area>
    <dict-dbclick-area class="not-first" ref="villageRef" v-model="value.village"
                 :dict="villageDict"
                 placeholder="村"></dict-dbclick-area>
  </div>

</template>

<script>


export default {
  props: {
    value: {
      type: Object,
      default () {
        return {
          province: '',
          city: '',
          country: '',
          town: '',
          village: ''
        }
      }
    }
  },
  data () {
    let that = this
    let dms = process.env.VUE_APP_DMS_PREFIX
    return {
      a: '',
      provinceDict: {
        cache: false,
        url: dms + '/areas/queryAreasByCondition',
        body: { codeType: 'AreasProvince' },
        method: 'post',
        label: 'districtName',
        value: 'districtCode'
      },
      cityDict: {
        cache: false,

        url () {
          if (!that.value.province) {
            return undefined
          }
          that.cityDict.body.fieldExt = that.value.province
          return dms + '/areas/queryAreasByCondition'
        },
        body: { codeType: 'AreasCity' },
        method: 'post',
        label: 'districtName',
        value: 'districtCode'
      },

      countryDict: {
        cache: false,

        url () {
          if (!that.value.city) {
            return undefined
          }
          that.countryDict.body.fieldExt = that.value.city
          return dms + '/areas/queryAreasByCondition'
        },
        body: { codeType: 'AreasCountry' },
        method: 'post',
        label: 'districtName',
        value: 'districtCode'
      },
      townDict: {
        cache: false,
        url () {
          console.log('ddddddddddddddddd')
          console.log(that.a)
          if (!that.value.country) {
            return undefined
          }
          that.townDict.body.fieldExt = that.value.country
          return dms + '/areas/queryAreasByCondition'
        },
        body: { codeType: 'AreasTown' },
        method: 'post',
        label: 'districtName',
        value: 'districtCode'
      },

      villageDict: {
        cache: false,
        url () {
          if (!that.value.town) {
            return undefined
          }
          that.villageDict.body.fieldExt = that.value.town
          return dms + '/areas/queryAreasByCondition'
        },
        body: { codeType: 'AreasVillage' },
        method: 'post',
        label: 'districtName',
        value: 'districtCode'
      },
    }
  },
  methods: {
    handleProvinceChange () {
      this.$emit('input', this.value)
      this.value.city = ''
      this.$refs.cityRef.reloadDict()
      this.value.country = ''

      this.$refs.countryRef.reloadDict()
      this.value.town = ''

      this.$refs.townRef.reloadDict()
      this.value.village = ''

      this.$refs.villageRef.reloadDict()
    },
    handleCityChange () {
      this.$emit('input', this.value)

      this.value.country = ''
      this.$refs.countryRef.reloadDict()
      this.value.town = ''

      this.$refs.townRef.reloadDict()
      this.value.village = ''

      this.$refs.villageRef.reloadDict()
    },

    handleCountryChange () {
      this.$emit('input', this.value)

      this.$refs.townRef.reloadDict()
      this.value.town = ''
      this.$refs.villageRef.reloadDict()
    },
    handleTownChange () {
      this.$emit('input', this.value)

      this.value.village = ''
      this.$refs.villageRef.reloadDict()
    },
    handleVillage(){
      this.$emit('input', this.value)
    }
  },
  computed: {}
}
</script>

<style lang="scss" scoped>

.pcic-area-select{
  .dict-dbclick-area{
    margin-right: 10px;
  }
  .dict-dbclick-area:last-child
  {
    margin-right: 0;
  }

  display: flex;
  .el-select{
    margin-right: 10px;
  }


  .el-select:last-child
  {
    margin-right: 0;
  }
}
</style>
<style lang="scss" scoped>
::v-deep .el-menu{
  border-right: 0;
}

::v-deep .not-first{
  .el-input__inner {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-left: 1px #C0C4CC solid !important;
  }

  .el-input__inner:focus {
    border-left: 1px #409eff solid !important;
  }
}
</style>
